<template>
  <div class="goods-item" @click="toGoodsPage(goods.good_id || goods.id)">
    <img :src="goods.banner[0].url" alt="" />
    <div class="infos">
      <div class="title">{{ goods.name }}</div>
      <div class="tags">
        <div class="item" v-for="(item, index) in goods.promotion" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="info">
        <div class="sales">
          销量 <span>{{ goods.sale }}</span>
        </div>
        <div class="spec">规格<span>>3种</span></div>
      </div>
    </div>
    <div class="shop" @click.stop="toShopPage(goods.shop_id)">
      <span>{{ goods.shop_name }}</span
      ><icon name="iconxiangyoubeifen16" size="18" />
    </div>
    <div class="price">
      <b>¥ {{ goods.starting_price }}</b
      ><s v-if="goods.price">¥ {{ goods.price }}</s>
    </div>
    <div
      class="favo"
      :class="{ active: showCollection }"
      @click.stop="collectionGoods"
    >
      <icon
        :title="showCollection ? '取消收藏' : '加入收藏'"
        name="iconshoucangbeifen"
        size="20"
      />收藏
    </div>
    <div class="button">
      <div class="add_car">加入购物车</div>
    </div>
  </div>
</template>

<script>
import api from "@/api";
export default {
  name: "GoodsItem5",
  computed: {
    showCollection() {
      if (this.collection == null) {
        return this.goods.goods_collection;
      } else {
        return this.collection;
      }
    },
  },
  data() {
    return {
      collection: null,
    };
  },
  props: {
    goods: Object,
  },
  created() {
    console.log(this.goods);
  },
  methods: {
    async collectionGoods() {
      let collection = this.showCollection ? 0 : 1;
      await api.GOODS_COLLECTION({
        id: [this.goods.id],
        status: collection,
      });
      this.collection = collection;
      this.$message.success("操作成功");
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-item {
  width: 1200px;
  box-sizing: border-box;
  height: 148px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  font-size: 0;
  padding: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  img {
    width: 108px;
    height: 108px;
    margin-right: 12px;
  }
  .infos {
    width: 280px;
    display: flex;
    flex-direction: column;
    .title {
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .tags {
      display: flex;
      margin: 12px 0;
      .item {
        margin-right: 12px;
        background: #dc2c1a;
        border-radius: 5px;
        padding: 3px 10px;
        font-size: 10px;
        color: #ffffff;
        line-height: 14px;
      }
    }
    .info {
      display: flex;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      .sales {
        margin-right: 30px;
      }
    }
  }
  .shop {
    cursor: pointer;
    margin: 0 79px 0 64px;
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .price {
    display: flex;
    align-items: center;
    width: 224px;
    b {
      font-size: 18px;
      font-weight: 500;
      color: #d52c1a;
      line-height: 25px;
    }
    s {
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      padding-left: 8px;
    }
  }
  .favo {
    cursor: pointer;
    white-space: nowrap;
    &.active {
      color: #d52c1a;
    }
    i {
      margin-right: 10px;
    }
    font-size: 14px;
    color: #33338f;
  }
  .button {
    margin-left: 20px;
    .add_car {
      cursor: pointer;
      width: 164px;
      height: 28px;
      background: #d52c1a;
      border-radius: 5px;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
